<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品编辑</title>
    <link rel="stylesheet" href="__LAYUI__/css/layui.css">
    <style>
        #imagePreview .image-item {
            position: relative;
            display: inline-block;
        }

        #imagePreview .del-btn {
            position: absolute;
            right: 0;
            top: 0;
            color: #fff;
            padding: 5px;
            font-size: 10px;
            background-color: red;

        }
    </style>
</head>


<body>

    <div class="layui-container" style="margin-top: 20px;">
        <form class="layui-form" action="" method="post">

            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="good_name" required lay-verify="required" placeholder="请输入商品名称"
                        class="layui-input" value="{$data.good_name}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="desc" required placeholder="请输入商品描述" class="layui-textarea">{$data.desc}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品类型</label>
                <div class="layui-input-block">
                    <select name="good_type" required lay-verify="required">
                        <option value="">请选择商品类型</option>
                        <option value="1" {$data.good_type=="1" ? 'selected' : "" }>会员</option>
                        <option value="2" {$data.good_type=="2" ? 'selected' : "" }>卡密(会员、经验)</option>
                        <option value="3" {$data.good_type=="3" ? 'selected' : "" }>自营商品</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">所需积分</label>
                <div class="layui-input-block">
                    <input type="number" name="score" required lay-verify="required" placeholder="请输入所需积分"
                        class="layui-input" value="{$data.score}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">对应奖励</label>
                <div class="layui-input-block">
                    <input type="text" name="value" required placeholder="请输入对应数值(天数|数量)" class="layui-input"
                        value="{$data.value}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">库存</label>
                <div class="layui-input-block">
                    <input type="number" name="stock" value="{$data.stock}" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <select name="status" required lay-verify="required">
                        <option value="1" {$data.status=="1" ? 'selected' : "" }>正常</option>
                        <option value="0" {$data.status=="0" ? 'selected' : "" }>下架</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">权重</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" value="{$data.sort}" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="uploadImages">上传图片</button>
                    <div id="imagePreview" style="margin-top: 10px;">

                    </div>
                    <input type="hidden" name="images" id="images" value="{$data.images}">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addGoods">提交</button>
                </div>
            </div>
        </form>
    </div>
    <script src="__LAYUI__/layui.js"></script>
    <script>
        layui.use(['form', 'upload'], function () {
            var form = layui.form,
                upload = layui.upload;
            $ = layui.$
            // 上传图片
            imageList = "{$data.images}"
            upload.render({
                elem: '#uploadImages',
                url: '/admin/good/uploadImg'
                , multiple: true
                , accept: 'file'
                , done: function (res) {
                    if (res.code === 200) {
                        imageList.push(res.data.src);
                        renderImages();
                    } else {
                        layer.msg('上传失败：' + res.message);
                    }
                }
                , error: function () {
                    layer.msg('上传出现错误');
                }
            });

            // 渲染图片
            function renderImages() {
                var imagePreview = $('#imagePreview');
                imagePreview.empty();
                if (!Array.isArray(imageList)) {
                    imageList = imageList.split(',')
                }

                imageList.forEach(function (item, index) {
                    if (item) {
                        imagePreview.append(`<div class="image-item">
                            <img src="${item}" style="width: 100px; margin-right: 10px;" />
                            <div class="del-btn" onclick="delImage('${item}',this)">删除</div>
                        </div>`);
                    }
                });
                $('#images').val(imageList.join(','));
            }
            renderImages()

            form.on('submit(addGoods)', function (data) {
                $.post('/admin/good/doEdit?id=' + "{$Request.get.id}", data.field, function (response) {
                    if (response.code === 200) {
                        layer.msg('商品修改成功');
                    } else {
                        layer.msg('商品修改失败：' + response.msg);
                    }
                });
                return false;
            });
        });
        function delImage(url, that) {
            imageList.pop(url);
            $('#images').val(imageList.join(','));
            $(that).parents()[0].remove()
        }
    </script>

</body>

</html>